import React, { Component } from 'react'
import { Redirect } from 'react-router-dom'
import { Form, Icon, Input, Button, message } from 'antd'
import './login.less'
import { reqLogin } from '../../api'
import memeryUtils from '../../utils/memeryUtils'
import storageUtils from '../../utils/storageUtils'

/**
 * 登录的路由组件
 */

class Login extends Component {
  handleSubmit = e => {
    e.preventDefault()
    this.props.form.validateFields(async (errors, values) => {
      if (!errors) {
        //登录成功
        const { username, password } = values
        let result = await reqLogin(username, password)

        if (result.status === 0) {
          message.success('登录成功')

          //保存user
          const user = result.data
          memeryUtils.user = user
          storageUtils.saveUser(user)

          //跳转到管理界面 不需要回退到登录界面
          this.props.history.replace('/')
        } else {
          //登录失败
          message.error(result.msg)
        }
      }
    })
  }

  validatePassword = (rule, value, callback) => {
    if (!value) {
      callback('请输入密码')
    } else {
      callback()
    }
  }

  render() {
    const user = memeryUtils.user
    //如果是登录状态，地址栏输入/login直接跳转到管理界面
    if (user._id) {
      return <Redirect to="/" />
    }

    const { getFieldDecorator } = this.props.form
    return (
      <div className="login">
        <header className="login-header">
          <h1>React项目：后台管理系统</h1>
        </header>
        <section className="login-content">
          <h2>用户登录</h2>
          <Form className="login-form" onSubmit={this.handleSubmit}>
            <Form.Item>
              {getFieldDecorator('username', {
                rules: [
                  { required: true, message: '请输入用户名' },
                  { min: 4, message: '用户名最少4位' },
                  { max: 12, message: '用户名最长12位' },
                  {
                    pattern: /^[a-zA-Z0-9_]+$/,
                    message: '用户名只允许字母数字和下划线'
                  }
                ]
              })(
                <Input
                  prefix={
                    <Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入用户名"
                />
              )}
            </Form.Item>

            <Form.Item>
              {getFieldDecorator('password', {
                rules: [{ validator: this.validatePassword }]
              })(
                <Input
                  type="password"
                  prefix={
                    <Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />
                  }
                  placeholder="请输入密码"
                />
              )}
            </Form.Item>

            <Form.Item>
              <Button
                type="primary"
                htmlType="submit"
                className="login-form-button"
              >
                登录
              </Button>
            </Form.Item>
          </Form>
        </section>
      </div>
    )
  }
}

const WrapLogin = Form.create()(Login)
export default WrapLogin
